<template>
    <el-container >
        <el-header class="head1" style="width: 100%;height: 85px">
            <i class="el-icon-my-statistic"></i>
            <el-button class="el-button1" type="success" style="margin-left: 900px ;margin-right: 30px;margin-top: 20px"  plain>
            <router-link   to="/mo" style="color: rgba(39,170,51,0.66)" >修改数据</router-link>
            </el-button>
            <el-button class="el-button1" type="success" style="margin-right: 30px"   @click="dialogVisible = true" plain>关于我们</el-button>
            <el-dialog
                    title="关于我们"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <span>第11组课设</span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>
            <el-button class="el-button1" type="success" style="margin-right: 20px"  @click="dialogVisible1 = true" plain>联系我们</el-button>
            <el-dialog style="color: rgba(10,114,10,0.69)"
                    title="联系电话"
                    :visible.sync="dialogVisible1"
                    width="30%"
                    :before-close="handleClose">
                <span>15710454908</span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
  </span>
            </el-dialog>
            </el-header>
        <el-header style="background-color: rgba(10,114,10,0.69);width: 100%;height: 80px">
            <h1 style="margin-top: 30px;text-align:center;font-size: 30px;color: white" > 基 于 服 装 领 域 的 知 识 问 答 系 统 </h1>
        </el-header>

        <el-main style="width: 100%;">
            <el-row>
                <el-col :span="8" class="lightgreen-box">
<!--                    <el-card style="width:400px" >-->
                    <el-card style="width:400px;height:450px">
                        <span>
                            操 作：
                        </span>
                                <el-button icon="el-icon-search"   type="success" plain @click="load()">
                                    查询所有关系
                                </el-button>
                                <el-button icon="el-icon-search"   type="success" plain @click="load1()">
                                 查询所有节点
                                </el-button>
                        <el-input type="textarea"
                                  :rows="10"
                                  style="width:350px;margin-top: 30px"
                                  v-model="viewerData2"></el-input>
                        <el-button  type="success" plain style="margin-top: 10px"  icon="el-icon-refresh-left" @click="resetForm()">重置</el-button>
                    </el-card>
                </el-col>
                <el-col :span="16" class="orange-box">
                    <el-card style="width: 900px;height: 450px" >
                        <div>
                            <el-input style="width: 200px;" placeholder="关键字查询"
                                      suffix-icon="el-icon-search" v-model="keywords"
                                      @keyup.enter.native ="getDomainGraph()"></el-input>
                            <el-button icon="el-icon-search" @click="getDomainGraph" type="success" plain style="margin-left: 30px">关键字查询</el-button>
                            <el-button icon="el-icon-refresh-left"  @click="reset" type="success" plain style="margin-left: 10px">重置</el-button>

                            <el-row :gutter="20">
                                <el-col :span="13"><div class="grid-content bg-purple">
                                    <el-table :data="viewerData" border stripe  :header-cell-class-name="'Hbg'"  border style="margin-top: 25px;">
                                        <el-table-column prop="name" style="background-color: #f56c6c" label="name" width="100" align="center"></el-table-column>
                                        <el-table-column prop="property" label="property" width="150" align="center"></el-table-column>
                                        <el-table-column prop="uuid" label="uuid" width="100" align="center"></el-table-column>
                                        <el-table-column prop="sid" label="sid" width="100" align="center"></el-table-column>
                                    </el-table>
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="pageNum"
                                            :page-sizes="[5, 8, 10, 20]"
                                            :page-size="pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                              >
                                    </el-pagination>
                                </div></el-col>
                                <el-col :span="10">
                                    <div class="grid-content bg-purple">
                                        <el-table :data="viewerData1" border stripe   :header-cell-class-name="'Hbg'"  border @selection-change="handleSelectionChange" style="margin-top: 25px;">
                                            <el-table-column style="background-color: #F56C6C" prop="sourceid" label="sourceid" width="120" align="center"></el-table-column>
                                            <el-table-column prop="targetid" label="property" width="120" align="center"></el-table-column>
                                            <el-table-column prop="uuid" label="uuid" width="120" align="center"></el-table-column>
                                        </el-table>
                                        <el-pagination
                                                @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                                :current-page="pageNum"
                                                :page-sizes="[5, 8, 10, 20]"
                                                :page-size="pageSize"
                                                layout="total, sizes, prev, pager, next, jumper"
                                        >
                                        </el-pagination>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                </el-card>
                </el-col>
            </el-row>
            </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "gk",
        data() {
            return {
                limit:'',
                cypher: '',
                valueNum: 50,
                ruleForm:[],
                dialogVisible: false,
                dialogVisible1: false,
                relationship:[],
                node:[],
                viewerData: [],
                viewerData1: [],
                viewerData2: [],
                keywords: ' ',
                pageNum: 1,
                pageSize: 5,
                graphNodes: [],
            }
        },
        // created() {
        //     this.load()
        // },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            resetForm(formName) {
                this.viewerData2=' '
                this.viewerData3=' '
            },
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            },
            rest() {
                this.keywords = ''
            },
            // 查询图节点和关系
            getDomainGraph() {
                this.request.get("graph/getDomainGraph", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        nodename: this.keywords,
                    }
                }).then(res => {
                    if (res.code == 200) {
                        this.viewerData = res.data.node;
                        this.viewerData1 = res.data.relationship;
                    } else {
                        errortip(res.msg)
                    }
                })
            },
            load(){
                this.request.get("graph/getRelationshipType", {
                }).then(res => {
                    if(res.code==200) {
                        this.viewerData2 = res.data;
                    } else {
                        errortip(res.msg)
                    }
                })
            },
            load1(){
                this.request.get("graph/getNodesLabels", {
                }).then(res => {
                    if(res.code==200) {
                        this.viewerData2 = res.data;
                    } else {
                        errortip(res.msg)
                    }
                })
            },
        }
    }

</script>


<style scoped>
    .el-icon-my-statistic {
        background: url("../../assets/1.jpg") center no-repeat;
        background-size: contain;

        display: inline-block;
        width: 40px!important;
        height: 40px!important;
        margin-left: 6px;
        margin-top: 25px!important;
    }
  .el-table__header-wrapper{
      background-color: rgba(39, 170, 51, 0.66) !important;

  }
    .tableHeaderColor{
        background-color: rgba(39, 170, 51, 0.66) !important;
    }
</style>